<template>
  <div class="chart-properties-container">
    <div class="style-area">
      <div
        v-for="item in styleConfig"
        :key="item.key"
        class="style-item"
        :class="{ active: activeKey === item.key }"
        @click="updateActiveKey(item.key)"
      >
        <div class="left-content">{{ $t(item.name || "") }}</div>
        <div class="right-content">
          <div
            v-if="item.editorType === 'colorPicker'"
            class="g-ai-c"
            style="color: rgba(0, 0, 0, 0.65)"
          >
            <el-color-picker
              v-model="item.value"
              show-alpha
              @change="val => stepValueChange(val, item.key)"
            />
            <span>{{ formattRGBA(item.value) }}</span>
          </div>
          <el-checkbox
            v-if="item.editorType === 'checkbox'"
            v-model="item.value"
            :label="$t(item.value.toString())"
            size="large"
            @change="val => stepValueChange(val, item.key)"
          />
          <el-input
            v-if="item.editorType === 'input'"
            v-model="item.value"
            @input="val => stepValueChange(val, item.key)"
          />
          <el-select
            v-if="item.editorType === 'select'"
            v-model="item.value"
            :suffix-icon="SelectSuffix"
            @change="val => stepValueChange(val, item.key)"
          >
            <el-option
              v-for="option in item.options"
              :key="option.value"
              :value="option.value"
              :label="option.label"
            />
          </el-select>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onBeforeMount } from "vue";
import { ganttConfig, chartProperties } from "@/mdesign-lib/mdesign-app.umd.js";
import { toMap } from "@/util/common";
import { ChartPropertyItem } from "@/modules/model/comps/station/graphTabs/ganttChartDiagram/type";

interface Props {
  diagramSts: string;
  defaultConfig?: ChartPropertyItem[];
}

interface PropertyItem extends ChartPropertyItem {
  value: any;
}

const props = defineProps<Props>();
const styleConfig = ref<PropertyItem[]>([]);
onBeforeMount(() => {
  const currentDiagramStyleConfig = props.defaultConfig?.length ? props.defaultConfig : ganttConfig[props.diagramSts].chartProperties;
  const allChartPropertyMap = toMap(chartProperties, "key");
  styleConfig.value = currentDiagramStyleConfig
    .filter(item => allChartPropertyMap.get(item.key))
    .map(item => {
      const baseConfig = allChartPropertyMap.get(item.key);
      return {
        ...baseConfig,
        ...item,
        value: item.defaultValue === undefined ? baseConfig?.defaultValue : item.defaultValue
      };
    });
});

const activeKey = ref("");

const updateActiveKey = (key: string) => {
  activeKey.value = key;
};

const emit = defineEmits<{
  (e: "stepValueChange", value: any, path: string[]): void;
}>();

const stepValueChange = (val: any, key: string) => {
  // console.log('stepValueChange', val);
  const newPath = [key];
  emit("stepValueChange", val, newPath);
};

const formattRGBA = (val: string) => {
  if (!val) return "";
  return val.toLocaleUpperCase().replace("(", " [").replace(")", "]");
};
</script>
<style lang="scss">
.chart-properties-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  .style-area {
    border: 1px solid #e0e0e0;
    .style-item {
      height: 25px;
      border-bottom: 1px solid #e0e0e0;
      display: flex;
      &:last-of-type {
        border-bottom: 0;
      }
      &.active {
        .left-content {
          background: #e8eff7;
        }
        .right-content {
          position: relative;
          &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            border: 1px solid var(--background-color-active);
            pointer-events: none;
            z-index: 100;
          }
        }
      }
      .left-content {
        border-right: 1px solid #e0e0e0;
        width: 192px;
        color: rgba(0, 0, 0, 0.65);
        line-height: 25px;
        padding-left: 8px;
      }
      .right-content {
        flex: 1;
        overflow: hidden;
        .el-select,
        .el-input-number {
          width: 100%;
        }
        .el-select__wrapper {
          box-shadow: none;
        }
        .el-input__wrapper {
          box-shadow: none !important;
          padding: 0 8px;
          .el-input__inner {
            height: 24px;
            text-align: left;
          }
        }
        .el-color-picker {
          margin-left: 4px;
          .el-color-picker__trigger {
            border: 0;
          }
        }
        .el-checkbox {
          height: 24px;
          margin-left: 8px;
          .el-checkbox__label {
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>
